<template>
    <div class="charts-container">
        <h1 v-if="showTitle">近期天气</h1>
        <div class="charts">
            <div class="top">
                <div
                class="weather-item"
                v-for="item in cityWeatherFourDays"
                :key="item.date"
                >
                    <span>{{ item.week }}</span>
                    <span>{{ item.date }}</span>
                    <span>{{ item.dayweather }}</span>
                    <span>风力 {{ item.daypower }}级</span>
                </div>
            </div>
            <div class="bottom">
                <v-chart :option="option"></v-chart>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref,watch } from 'vue'

const cityWeatherFourDays = ref([])
const dayTempData = ref([])
const nightTempData = ref([])
const option = ref({})

const props = defineProps({
    weatherInFourDays:{
        type:Array,
        required:true,
    },
    showTitle:{
        type:Boolean,
    },
})

//chart配置项
const renderCharts = (v1,v2) =>{
    option.value = {
        xAxis:{
            type:'category',
            data:['今天','明天','后天','大后天'],
            show:false,
        },
        yAxis:{
            type:'value',
            show:false,
        },
        grid:{
            top:'10%',
            left:'0',
            right:'0',
            bottom:'20%',
        },
        series:[
            {
                name:'Day Temperrature',
                type:'line',
                smooth:true,
                data:v1,
                label:{
                    show:true,
                    color:'#fff',
                    formatter:function(params) {
                        return `白${params.value}℃`
                    }
                },
            },
            {
            name: 'Night Temperature',
            type: 'line',
            smooth: true,
            data: v2,
            label: {
                show: true,
                position: 'bottom',
                color: '#fff',
                formatter: function (params) {
                return `晚${params.value}℃`;
                },
            },
            },
        ],
    }
}

const formatWeatherData = (data) => {
  const weekday = ['none', '周一', '周二', '周三', '周四', '周五', '周六','周日'];
    data.forEach((item,index) => {
        item.date = item.date.slice(5);//"date": "2025-05-16"
        if(index === 0) {
            item.week = '今天'
        } else if(index === 1) {
            item.week = '明天'
        } else {
            const weekIndex = parseInt(item.week) % 8
            item.week = weekday[weekIndex]
        }
    })
}

watch(props,() => {
    cityWeatherFourDays.value = JSON.parse(
        JSON.stringify(props.weatherInFourDays)//深拷贝
    )
    dayTempData.value = cityWeatherFourDays.value.map((item) => item.daytemp);
    nightTempData.value = cityWeatherFourDays.value.map((item) => item.nighttemp);
    formatWeatherData(cityWeatherFourDays.value)
    renderCharts(dayTempData.value,nightTempData.value)
})
</script>

<style lang="scss" scoped>
.charts-container {
  h1 {
    font-size: 16px;
    font-weight: normal;
  }
  .charts {
    margin-top: 20px;
    height: 460px;
    background-color: #004e71;
    padding: 35px 35px;
    .top {
      display: flex;
      gap: 10px;
      .weather-item {
        display: flex;
        flex: 1;
        justify-content: space-between;
        flex-direction: column;
        text-align: center;
        gap: 18px;
      }
    }
    .bottom {
      position: relative;
      height: 300px;
      margin-top: 20px;
    }
  }
}
</style>